<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-04-10 16:54:58
 * @Description: 
-->
<template>
    <el-row>
        <el-col :span="24" style="padding: 20px">
            <el-row>
                <el-col :span="6" :style="`padding-right: 10px;`">
                    <el-card>
                        <div class="type-search-container" style="margin-bottom: 20px;">
                            <el-input :prefix-icon="Search" :size="'small'" v-model="filterText" placeholder="算法类型查询"
                                @enter.keyup="" />
                            <el-button size="small" type="primary" style="margin-left:10px">搜索</el-button>
                        </div>
                        <el-tree show-checkbox :style="`height: ${view.height - 250}px;overflow:auto`" ref="treeRef"
                            class="filter-tree" :data="data" :props="defaultProps" default-expand-all
                            :filter-node-method="filterNode" />
                    </el-card>
                </el-col>
                <el-col :span="18">
                    <el-card>
                        <el-row>
                            <el-col :span="24" style="display:flex;justify-content: space-between;margin-bottom: 20px;">
                                <el-button type="primary" size="small" plain
                                    @click="centerDialogVisible = true">算法上传</el-button>
                                <div class="search-container">
                                    <el-input size="small" placeholder="算法查询" :prefix-icon="Search" style="width: 200px;"
                                        v-model="keyword"></el-input>
                                    <el-button size="small" type="primary" @click="getAlgorithm">搜索</el-button>
                                </div>
                            </el-col>
                        </el-row>
                        <el-table :border="true" size="small" :data="tableData" style="width: 100%"
                            :height="view.height - 315">
                            <el-table-column :align="'center'" type="index" label="序号" width="60" />
                            <el-table-column :align="'center'" prop="name" label="算法名称">
                                <template #default="scope">
                                    <el-link size="small" type="primary">{{
                                        scope.row.name
                                    }}</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column :align="''" prop="identifier" label="算法标识">
                                <template #header>
                                    <div style="display:flex;align-items:center">
                                        <el-icon>
                                            <InfoFilled />
                                        </el-icon>
                                        &nbsp;&nbsp;
                                        <span>算法标识</span>
                                    </div>
                                </template>
                                <template #default="scope">
                                    <el-link size="small" type="default">{{
                                        scope.row.identifier
                                    }}</el-link>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column :align="'center'" prop="description" label="算法描述" /> -->
                            <el-table-column :align="'center'" prop="operating_system" width="100" label="系统环境" />
                            <el-table-column :align="'center'" prop="version" label="版本" width="60">
                                <template #default="scope">
                                    <el-tag size="small"> {{
                                        scope.row.version
                                    }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column :align="'center'" prop="creatsDate" label="创建日期">
                                <template #default="scope">
                                    {{ utils.formatDate(scope.row.creatsDate) }}
                                </template>
                            </el-table-column>
                            <el-table-column :align="'center'" prop="updateDate" label="更新日期">
                                <template #default="scope">
                                    {{ utils.formatDate(scope.row.updateDate) }}
                                </template>
                            </el-table-column>
                            <el-table-column type="expand" label="参数">
                                <template #default="props">
                                    <div style="padding: 20px;">
                                        <el-card>
                                            <el-descriptions direction="vertical" class="margin-top"
                                                :title="'参数预设：' + props.row.identifier + ''" :column="2" :size="'small'"
                                                :border="true">
                                                <template #extra>
                                                    <el-button size="small" type="primary">修改参数预设</el-button>
                                                </template>
                                                <el-descriptions-item v-for=" item in JSON.parse(props.row.parameters)">
                                                    <template #label>
                                                        <div class="cell-item">
                                                            {{ item.param_name }}({{ item.zh_name }})
                                                        </div>
                                                    </template>
                                                    <div style="display:flex;justify-content: space-between;">
                                                        <el-tag>{{ item.default_value }}</el-tag> <el-button type="primary"
                                                            link :icon="Edit"></el-button>
                                                    </div>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                            <template #footer>
                                                <div style="display: flex;align-items: center;">
                                                    <div style="width: 80px;">算法路径：</div>
                                                    <el-input readonly size="small"
                                                        :model-value="props.row.application"></el-input>
                                                    <el-button size="small" type="primary" plain>修改</el-button>
                                                </div>
                                            </template>
                                        </el-card>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column :align="'center'" label="操作" width="100">
                                <template #default="scope">
                                    <el-button-group>
                                        <el-link type="primary">编辑</el-link>&nbsp;
                                        <el-popconfirm title="确定要删除当前算法么?" @confirm="deleteAlgorithm(scope.row)">
                                            <template #reference>
                                                <el-link type="primary">删除</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                            <el-table-column :align="'center'" label="执行" width="100">
                                <template #default="scope">
                                    <el-button-group>
                                        <el-popconfirm title="确定要执行当前算法?" @confirm="executeAlgorithm(scope.row)">
                                            <template #reference>
                                                <el-button style="font-size: large;" size="small" :icon="CaretRight"
                                                    type="success" circle plain></el-button>
                                            </template>
                                        </el-popconfirm>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </el-table>
                        <template #footer>
                            <div style="margin-top:5px;width: 100%;">
                                <pagination-com :pagination="algorithmPagination"
                                    @handleSizeChange="algorithmSizeChangeHanlder"
                                    @handleCurrentChange="algorithmIndexChangeHanlder"></pagination-com>
                            </div>
                        </template>
                    </el-card>
                </el-col>
            </el-row>

            <el-dialog v-model="centerDialogVisible" title="" width="30%" center>
                <el-upload ref="upload" style="width: 100%;" :accept="'.json'" action="/algorithmApi/algorithm" drag
                    :on-exceed="handleExceed" :limit="1" :on-success="onUploadHandler">
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        算法配置文件<em>上传</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">
                            支持.json文件后缀
                        </div>
                    </template>
                </el-upload>
            </el-dialog>
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import paginationCom from "@/components/pagination/paginationCom.vue";
import utils from '@/utils/util'
import { ElMessage, ElMessageBox, genFileId } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { Search, CaretRight, InfoFilled, Edit } from "@element-plus/icons-vue";
import HttpService from "@/api/api";
let fileList = ref([])
interface Tree {
    [key: string]: any
}
let tableData = ref([])
let tableLoading = ref(false)
let algorithmPagination = reactive({
    page_index: 1,
    page_size: 15,
    page_total: 0,
});
const data: Tree[] = [
    /*  {
         id: 1,
         label: '数据监听',
         children: [
             {
                 id: 4,
                 label: '数据监听任务',
             },
         ],
     },
     {
         id: 2,
         label: '数据预处理',
         children: [
             {
                 id: 5,
                 label: '数据预处理任务',
             },
         ],
     },
     {
         id: 3,
         label: '变化检测',
         children: [
             {
                 id: 7,
                 label: '建筑变化检测',
             },
             {
                 id: 8,
                 label: '道路变化检测',
             },
         ],
     },
     {
         id: 4,
         label: '地物反演',
         children: [
             {
                 id: 7,
                 label: 'NDVI监测',
             },
             {
                 id: 8,
                 label: '植被盖度监测',
             },
             {
                 id: 9,
                 label: '草地生物量监测',
             },
         ],
     },
     {
         id: 5,
         label: '地物分类',
         children: [
             {
                 id: 7,
                 label: '土地利用分类监测',
             },
             {
                 id: 8,
                 label: '湿地分类监测',
             },
         ],
     }, */
    {
        id: 6,
        label: '目标检测',
        children: [
            /*  {
                 id: 7,
                 label: '建筑目标检测',
             },
             {
                 id: 8,
                 label: '道路目标检测',
             }, */
            {
                id: 8,
                label: '水体目标检测',
            },
        ],
    },
    /*  {
         id: 7,
         label: '斜坡单元区人类活动特征识别',
         children: [
             {
                 id: 7,
                 label: '建设活动区',
             },
             {
                 id: 8,
                 label: '填埋区',
             },
             {
                 id: 8,
                 label: '尾矿区',
             },
         ],
     }, */
    /*   {
          id: 8,
          label: '非人类工程活动斜坡形变聚集区成果',
          children: [
              {
                  id: 7,
                  label: '非人类工程活动斜坡形变聚集区成果',
              },
          ],
      }, */
    {
        id: 9,
        label: '斜坡单元区特征因子识别',
        children: [
            {
                id: 7,
                label: '水体特征',
            },
            {
                id: 8,
                label: '冰雪特征',
            },
        ],
    },
    /*  {
         id: 10,
         label: '非自然类斜坡形变聚集区成果',
         children: [
             {
                 id: 7,
                 label: '非自然类斜坡形变聚集区成果',
             },
 
         ],
     }, */
]
let centerDialogVisible = ref(false)
const upload = ref<UploadInstance>()

let keyword = ref('')
let filterText = ref('')
var view = reactive({
    height: window.innerHeight,
});
const defaultProps = {
    children: 'children',
    label: 'label',
}
const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.label.includes(value)
}
const getAlgorithm = function () {
    let params = {
        page_size: algorithmPagination.page_size,
        page_index: algorithmPagination.page_index,
        keyword: keyword.value
    };
    tableData.value.length = 0;
    tableLoading.value = true
    HttpService.algorithmManage.getAlgorithms(
        params,
        (res) => {

            if (res.status == 200) {
                res.data.data.map((item, index) => {
                    tableData.value.push(item);
                    tableLoading.value = false
                });
                algorithmPagination.page_total = res.data.total
            } else {
                console.log("获取信息失败" + res);
                tableLoading.value = false
            }
        },
        (error) => {
            console.log(error);

            tableLoading.value = false
        }
    );
};

const deleteAlgorithm = function (algorithm) {
    let params = {
        id: algorithm.id
    };
    HttpService.algorithmManage.deleteAlgorithm(
        params,
        (res) => {

            if (res.status == 200) {
                ElMessage({
                    message: "删除成功 ",
                    type: "success",
                });
                getAlgorithm()
            } else {
                ElMessage({
                    message: res,
                    type: "error",
                });
            }
        },
        (error) => {
            console.log(error);
        }
    );
}
const algorithmSizeChangeHanlder = function (page_size: number) {
    algorithmPagination.page_size = page_size;
    getAlgorithm();
};
const algorithmIndexChangeHanlder = function (page_index: number) {
    algorithmPagination.page_index = page_index;
    getAlgorithm();
};

const onUploadHandler = function (res) {
    if (res.success) {
        ElMessage({
            message: "上传成功 ",
            type: "success",
        });
    } else {
        ElMessage({
            message: res,
            type: "error",
        });
    }
    getAlgorithm();
    centerDialogVisible.value = false
    upload.value!.clearFiles()
}

const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}

const executeAlgorithm = function (algorithm) {
    let params = {
        id: algorithm.id
    };
    HttpService.algorithmManage.executeAlgorithm(
        params,
        (res) => {

            if (res.status == 200) {
                ElMessage({
                    message: `${algorithm.identifier}_算法执行成功`,
                    type: "success",
                });
                getAlgorithm()
            } else {
                ElMessage({
                    message: res,
                    type: "error",
                });
            }
        },
        (error) => {
            console.log(error);
        }
    );
}


getAlgorithm()

</script>
<style lang="scss" scoped>
.search-container {
    width: 260px;
    display: flex;
    justify-content: space-between;
}

.type-search-container {
    display: flex;
    justify-content: space-between;
}
</style>
<style lang="scss"></style>